<style>
</style>
<template>
    <span>
        <Drawer title="证书列表" :closable="false" placement="right" v-model="certificateDrawer" width="70%">
            <Row style="padding-top: 5px">
                <Table :loading="loading" border :columns="userColumns" :data="userData" ref="userTable"></Table>
            </Row>
        </Drawer>
    </span>
</template>
<script>
    import {getUserCertificate} from "@/api/bus";

    export default {
        name: "studentScore",
        props: {
        },
        data() {
            return {
                certificateDrawer: false,
                modalTitle: '证书列表',
                loading: true,
                userId: "",
                permData: [],
                userColumns: [
                    {
                        type: "index",
                        width: 60,
                        align: "center"
                    },
                    {
                        title: "证书名称",
                        align: "center",
                        key: "certificateName"
                    },
                    {
                        title: "证书编号",
                        align: "center",
                        key: "certificateNum",
                    },
                    {
                        title: "颁证时间",
                        align: "center",
                        key: "awardTime",
                    },
                    {
                        title: "颁证机构",
                        align: "center",
                        key: "award",
                    },
                    {
                        title: "有效期",
                        align: "center",
                        key: "validity",
                    },
                    {
                        title: "是否兑换积分",
                        align: "center",
                        key: "isConvert",
                        render: (h, params) => {
                            if (params.row.isConvert === 1) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "green"
                                            }
                                        },
                                        "已兑换"
                                    )
                                ]);
                            } else if (params.row.isConvert === 0) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "blue"
                                            }
                                        },
                                        "未兑换"
                                    )
                                ]);
                            }
                        }
                    },
                    {
                        title: "证书状态",
                        align: "center",
                        key: "isNew",
                        render: (h, params) => {
                            if (params.row.isNew === 1) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "green"
                                            }
                                        },
                                        "新证书"
                                    )
                                ]);
                            } else if (params.row.isNew === 0) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "blue"
                                            }
                                        },
                                        "旧证书"
                                    )
                                ]);
                            }
                        }
                    },
                    {
                        title: "用户学时",
                        align: "center",
                        key: "userperiod",
                    }
                ],
                userData: [],
                totalUser: 0
            }
        },
        methods: {
            //加载数据
            showDrawer(params){
                this.certificateDrawer = true;
                if (params.id) {
                    this.userId = params.id;
                    this.getData();
                }
            },
            getData() {
                this.loading = true;
                getUserCertificate(this.userId).then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.userData = res.data.rows;
                    }
                });
            },
        },
        mounted() {

        }
    }
</script>